<template>
	<view class="search_top">
		<view class="search">
			<view class="search-xc-img">
				<image class="search_pic" src="../../../static/shousuo.png"></image>
			</view>
			<input type="text" placeholder="搜索活动" placeholder-style="color: black;" class="search-xc-box" >
			<view class="search-jx-img">
				<image class="search_jx" src="../../../static/Country_img/juxing.png"></image>
			</view>
		</view> 
		<view class="search_mouble">
			<text class="search_mouble_title" v-for="(item,i) in search_mouble">{{item}}</text>
		</view>
	</view>
	<view class="active">
		<view class="active_top_mouble">
			<text class="active_title">热门活动</text>
		</view>
			<view class="active_bottom_mouble">
				<view class="active_content"  v-for="(item,i) in active">
					<image class="active_content_pic" :src="$Config.HOST+'/public'+item.thump" mode=""></image>
					<view class="active_content_right">
						<text class="active_content_right_title">{{item.active_name}}</text>
						<text class="active_content_right_content">时间：{{item.time}}</text>
						<text class="active_content_right_content">地点：{{item.position}}</text>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search_mouble:["关爱老人","留守儿童","乡村支教","乡村艺术","吃美食","乡村种植"],
				active:[]
			}
		},
		onLoad() {
			let that =this
			uni.request({
				url:'http://village.yqxbxb.com/api/villages/VillWithActiveList',
				method:'GET',
				success(res) {
					console.log(res);
					that.active = res.data.data.data;
				}
			})
		},
		methods: {
			
		}
	}
</script>
	
<style>
	page {
	  background-color:#e1e4e1; 
	}
	.search_top{
		background-color: white;
		width: 90%;
		height: 400rpx;
		margin:67rpx auto;
	}
	.search{
		width:98%;
		margin: 0 auto;
		height: 65rpx;
		border: 5rpx solid #097C25;
		border-radius: 50rpx;
		border-color: #c7ccbb;
		text-align: center;
		display: flex;
		align-items: center;
	}
	.search-xc-box{
		width: 100%;
		position: absolute;
		text-align: center;
		line-height:65rpx ;
		height: 100%;	
	}
	.search_pic{
		width: 50rpx;
		height: 50rpx;
		position:relative;	
	}
	.search-xc-img{
		margin-top: 5px;
		margin-left: 130px;
	}
	.search-jx-img{
		width: 100%;
		    display: flex;
		    flex-wrap: nowrap;
		    flex-direction: row-reverse;
	}
	.search_jx{
		border-radius: 0px 21px 21px 0px;
		width: 75rpx;
		height: 75rpx;
	}
	.search_mouble{
		margin-top: 50rpx;
		display: flex;
		flex-wrap: wrap;
	
	}
	.search_mouble_title{
		width: 180rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		margin: 20rpx auto;
		padding: 5rpx 8rpx;
		border-radius: 15rpx;
		color: #eee;
		background-color: #097C25;
		
	}
	.active_top_mouble{
		width: 90%;
		height: 50rpx;
		margin: 10rpx auto;
		background-color: white;
	}
	.active_bottom_mouble{
		width: 90%;
		margin: 0 auto;
		background-color: white;
	}
	.active_content{
		width: 85%;
		margin: auto;
		padding: 0 0 10rpx;
		margin-bottom: 20rpx;
		display: flex;
		background-color: white;
		
	}.active_content_pic{
		width: 260rpx;
		height: 120rpx;
		border-radius: 15rpx;
	}
	.active_content_right{
		padding: 10rpx 30rpx 0 30rpx;
		display: flex;
		background-color: #E1E4E1;
		flex-direction: column;
	}
	.active_content_right_title{
		margin-bottom: 10rpx;
		font-size: 20rpx;
	}
	.active_content_right_content{
		font-size: 20rpx;
	}
	.active_title{
		font-size: 38rpx;
	}
</style>
